<template>
  <div>
    <nav-bar :leftArrow="false" />
    <Niao v-if="niao" />
    <div class="home-box">
      <!-- 滚动播报 -->
      <van-notice-bar left-icon="/img/laba.png" scrollable :text="text" />
      <!-- 轮播图 -->
      <div class="lunbo">
        <van-swipe :autoplay="4000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 表单 -->
      <div class="box">
        <IconTitle title="物资计算器" imgUrl="2"></IconTitle>
        <div class="line"></div>
        <van-form>
          <van-cell-group inset>
            <van-field v-model="level" type="digit" name="等级" label="等级" placeholder="目标等级" />
            <van-field v-model="number" type="digit" name="数量" label="数量" placeholder="所需数量" />
          </van-cell-group>
          <div class="btng">
            <div class="subBtn" @click="cz">重 置</div>
            <div class="subBtn" @click="onSubmit">计 算</div>
          </div>
        </van-form>
      </div>

      <!-- 列表 -->
      <div class="box" v-if="list.length > 0">
        <IconTitle title="物资列表" imgUrl="3"></IconTitle>
        <div class="line"></div>
        <div class="list-box">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="le">{{ item.level }}级</div>
            <div class="rr">{{ item.number }}</div>
          </div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="box">
        <IconTitle title="友情链接" imgUrl="4"></IconTitle>
        <div class="line"></div>
        <div class="link-box">
          <a v-for="(link, index) in links" class="l-item" :href="link.url" :key="index" target="_blank">
            {{ link.name }}
          </a>
        </div>
      </div>
    </div>
    <tabBar />
  </div>
</template>
<script>
import tabBar from '@/components/TabBar/TabBar.vue'
import Niao from '@/components/niao/index.vue'
import IconTitle from '@/components/icon-title/index.vue'
import { Toast, Empty, NoticeBar, Form, Field, CellGroup, Notify } from 'vant'
import { toRefs, ref, computed, reactive, onMounted } from 'vue'
import { HomeService } from '@/api/api'

export default {
  name: 'Home',
  components: {
    tabBar,
    IconTitle,
    Niao
  },
  setup() {
    const state = reactive({
      level: ref(''),
      number: ref(''),
      list: [],
      niao: false,
      text: '欢迎使用幻兽爱合成小工具，欢迎收藏本站~',
      images: ['/lb/1.png', '/lb/2.png'],
      links: [{ url: 'https://www.yijianfankui.tk/', name: '幻兽小工具' }]
    })

    onMounted(() => {
      init()
    })

    const init = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })

      const { code, data } = await HomeService.info({ t: Date.now() })
      if (code && code == 200) {
        state.text = data.text
        state.images = data.images
        state.links = data.links
        state.niao = data.niao
      }
      Toast.clear()
    }

    const cz = () => {
      state.level = ''
      state.number = ''
      state.list = []
    }
    const onSubmit = () => {
      state.list = []
      if (!state.level) {
        Notify({ type: 'warning', message: '请输入目标等级' })
        return
      }
      if (state.level <= 1 || state.level > 18) {
        Notify({ type: 'warning', message: '等级最小为2，最大为18' })
        return
      }
      if (!state.number) {
        Notify({ type: 'warning', message: '请输入所需数量' })
        return
      }
      if (state.number <= 0 || state.number > 500) {
        Notify({ type: 'warning', message: '数量最小为1，最大为500' })
        return
      }

      for (var index = state.level; index >= 1; index--) {
        if (index == state.level) {
          const obj = {
            level: index,
            number: state.number
          }
          state.list[index - 1] = obj
        } else {
          const obj = state.list[index]
          const job = {
            level: index,
            number: obj.number % 2 == 0 ? (obj.number * 5) / 2 : ((obj.number - 1) * 5) / 2 + 3
          }
          state.list[index - 1] = job
        }
      }
      state.list = state.list.reverse()
    }
    return {
      ...toRefs(state),
      cz,
      onSubmit
    }
  }
}
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
  font-size: 12px;
}
:deep(.van-notice-bar) {
  border-radius: 8px;
  margin-bottom: 8px;
}
:deep(.van-cell-group) {
  margin: 0;
}
.title-com {
  margin: 8px 0;
  height: 40px;
  display: flex;
  justify-items: center;
  align-items: center;
  font-size: 13px;
  color: #777777;
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}
.home-box {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
  overflow-x: hidden;

  .big {
    width: 100px;
    height: 800px;
  }
  // 轮播
  .lunbo {
    width: 100%;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    img {
      width: 100%;
      height: 130px;
    }
  }
  .box {
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 #0000001a;
    .line {
      margin: 8px -10px 8px -10px;
      height: 1px;
      content: '';
      background: #eff2f5;
    }
    .van-form {
      margin-top: -3px;
    }

    .btng {
      padding: 8px 0;
      display: flex;
      justify-content: space-around;
      .subBtn {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        width: 120px;
        height: 45px;
        background: url('@/assets/images/btn.png') no-repeat;
        background-size: contain;
      }
    }

    .list-box {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      .item {
        color: #ffffff;
        display: flex;
        align-items: center;
        width: 100px;
        height: 40px;
        background: url('@/assets/images/box.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 17.5px 11px 0; // 间隙为5px
        &:nth-child(3n) {
          // 去除第3n个的margin-right
          margin-right: 0;
        }

        .le {
          padding-left: 2px;
          width: 40px;
        }
        .rr {
          width: 55px;
          text-align: right;
        }
      }
    }
    .link-box {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      .l-item {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000000;
        width: 80px;
        height: 20px;
        margin: 0 5px 8px 0; // 间隙为5px
        &:nth-child(4n) {
          // 去除第3n个的margin-right
          margin-right: 0;
        }
      }
    }
  }
}
</style>
